<template>
  <div id="scene-container">
     <HeatmapLayer
        ref="heatmapLayer"
        :source="{
          data: grid,
          transforms: [
            {
              type: 'hexagon',
              size: 800000,
              field: 'capacity',
              method: 'sum',
            },
          ],
        }"
        :color="{
          values: '#ddd',
        }"
        :shape="{
          values: 'hexagon',
        }"
        :style="{
          coverage: 0.7,
          opacity: 0.8,
        }"
      />
      <PointLayer
        ref="pointLayer"
        :options="{
          autoFit: true,
        }"
        :source="{
          data,
        }"
        :scale="{
          values: {
            color: {
              field: 'cum_conf',
              type: 'quantile',
            },
            size: {
              field: 'cum_conf',
              type: 'log',
            },
          },
        }"
        :color="{
          field: 'cum_conf',
          values: colors,
        }"
        :shape="{
          values: 'circle',
        }"
        :active="{
          option: {
            color: '#0c2c84',
          },
        }"
        :size="{
          field: 'cum_conf',
          values: [0, 30],
        }"
        :style="{
          opacity: 0.8,
        }"
      />
      <PointLayer
        ref="pointLayer1"
        :source="{
          data,
        }"
        :color="{
          values: '#fff',
        }"
        :shape="{
          field: 'Short_Name_ZH',
          values: 'text',
        }"
        :filter="{
          field: 'cum_conf',
          values: (v) => {
            return v > 2000;
          },
        }"
        :size="{
          values: 12,
        }"
        :style="{
          opacity: 1,
          strokeOpacity: 1,
          strokeWidth: 0,
        }"
      />
  </div>
</template>

<script>
import Vue from 'vue';
import { Scene } from '@antv/l7';
import { Map } from '@antv/l7-maps';
// import { PointLayer, HeatmapLayer } from '@/lib/l7-vue';
import PointLayer from '../LayerComponents/PointLayer.vue'
import HeatmapLayer from '../LayerComponents/HeatmapLayer'
import DataJson from '@/components/data.json';
import GridJson from '@/components/grid.json';
const colors = ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'];
// let sceneInstance = null;
let sceneInstance = Vue.observable({})
console.log('PointLayer', PointLayer);
export default {
  components: {
    PointLayer,
    HeatmapLayer,
  },
  // provider() {
  //   return {
  //     Scene: this.scene
  //   }
  // },
  props: {
    map: {
      type: Object,
    },
    option: {
      type: Object
    },
    onSceneLoaded: {
      type: Function,
    }
  },
  data() {
    // this.scene = null;
    return {
      data: DataJson,
      grid: GridJson,
      colors,
      scene: null
    }
  },
  mounted() {
    this.initScene();
  },
  beforeDestroy() {
    this.scene.destroy();
  },
  methods: {
    initScene() {
      const { option, onSceneLoaded, map } = this;
      sceneInstance = new Scene({
        id: "scene-container",
        ...option,
        map: new Map(map),
      });
      sceneInstance.on('loaded', () => {
        this.scene = sceneInstance
        this.$refs.heatmapLayer.initData(this.scene);
        this.$refs.pointLayer.initData(this.scene);
        this.$refs.pointLayer1.initData(this.scene);
        console.log('chushihua', this.scene, this)
        if (onSceneLoaded) {
          console.log('加载成功')
          onSceneLoaded(sceneInstance);
        }
      });
    }
  },
}
</script>

<style>

</style>